div.room{
    width: 100%;
    height: 100%;
    position: relative;
    & > div.connecting{
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
    }
    .container {
        position: relative;
        width: 150px;
        height: 150px;
        margin: 0 auto;
        /* border: 1px solid yellow; */
    }

    .water1 {
        -webkit-animation: wateranimate 4s 3s ease-out infinite;
        animation: wateranimate 4s 3s ease-out infinite;
    }

    .water2 {
        -webkit-animation: wateranimate 4s 2s ease-out infinite;
        animation: wateranimate 4s 2s ease-out infinite;
    }

    .water3 {
        -webkit-animation: wateranimate 4s 1s ease-out infinite;
        animation: wateranimate 4s 1s ease-out infinite;
    }

    .water4 {
        -webkit-animation: wateranimate 4s 0s ease-out infinite;
        animation: wateranimate 4s 0s ease-out infinite;
    }

    .water1,
    .water2,
    .water3,
    .water4 {
        padding: 20%;
        position: absolute;
        left: 30%;
        top: 30%;
        border: 1px solid pink;
        box-shadow: 0 0 120px 30px green inset;
        border-radius: 100%;
        z-index: 1;
        opacity: 0;
    }

    .fontAnimate {
        margin: 0 auto;
        text-align: center;
        margin-top: 20px;
    }

    .user {
        margin: 0 auto;
        text-align: center;
    }

    .cellPhone {
        border: 2px solid #ccc;
        width: 200px;
        height: 300px;
        position: absolute;
        top: 50%;
        left: 50%;
        margin-top: -100px;
        margin-left: -100px;
    }

    dot {
        display: inline-block;
        height: 1em;
        line-height: 1;
        text-align: left;
        vertical-align: -.25em;
        overflow: hidden;
    }

    dot::before {
        display: block;
        content: '...\A..\A.';
        white-space: pre-wrap;
        animation: dot 2s infinite step-start both;
    }
}
@-webkit-keyframes wateranimate {
    0% {
        -webkit-transform: scale(0);
        opacity: 0.5;
    }

    100% {
        -webkit-transform: scale(2);
        opacity: 0;
    }
}

@keyframes wateranimate {
    0% {
        -webkit-transform: scale(0);
        transform: scale(0);
        opacity: 0.7;
    }

    100% {
        -webkit-transform: scale(2);
        transform: scale(2);
        opacity: 0;
    }
}
@keyframes dot {
    33% {
        transform: translateY(-2em);
    }
    66% {
        transform: translateY(-1em);
    }
}
